<template>
  <uni-nav-bar title="任务" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package_sale">
    <view class="space-between">
      <view class="center">
        <text style="font-weight: 500;">订单号：{{orderAll.order_sn}}</text>
        <!-- <text class="state">预</text> -->
      </view>
      <view class="but">{{orderAll.status_name}}</view>
    </view>
    <view class="center top">
      <view class="left">配送地址</view>
      <view class="center" style="align-items: flex-start;width:75%;">{{orderAll.delivery_address}}
        <uni-icons type="navigate-filled" size="25" color="#999" style="margin-left:10rpx;margin-top:-5rpx;"
          @click="NavigationLoc()"></uni-icons>
      </view>
    </view>
    <view class="center top">
      <view class="left">配送时间</view>
      <view>{{orderAll.delivery_time}}</view>
    </view>
    <view class="center top">
      <view class="left">车牌号</view>
      <view>{{orderAll.cart_code}}</view>
    </view>
    <view class="center top">
      <view class="left">车友信息</view>
      <view>{{orderAll.driver_name}} <text style="color:#3F8FFB;"
          @click="telCall('15487917546')">{{orderAll.driver_mobile}}</text></view>
    </view>
    <view class="center top">
      <view class="left">备注</view>
      <view class="center" style="width:70%;align-items: flex-start;">{{orderAll.des}}</view>
    </view>
    <view class="center top" @click="operate(1)">
      <view class="left">福利品</view>
      <view>{{orderAll.fuli_nums}} >></view>
    </view>
    <view class="center top">
      <view class="left">最新进展</view>
      {{orderAll.status_name}}
    </view>
    <view class="space-between bottoms">
      <view @click="operate(2)">拒绝</view>
      <view @click="operate(3)">接单</view>
    </view>
  </view>
  <!-- 导航 -->
  <uni-popup ref="Navigation" type="bottom" style="width:100%;">
    <view class="popup">
      <view class="" @click="daohang('bai')">百度地图</view>
      <view class="" @click="daohang('de')">高德地图</view>
      <view class="" @click="daohang('teng')">腾讯地图</view>
      <view class="" @click="() => Navigation.close()">取消</view>
    </view>
  </uni-popup>
  <!-- 选择时间弹框 -->
  <TimePicker ref="times" @confirm="Receiving"></TimePicker>
  <!-- 福利列表 -->
  <CarShop ref="shopList"></CarShop>
  <!-- 当前位置经纬度 -->
  <Lotlats @position="position"></Lotlats>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import Lotlats from '@c/team/Lotlat.vue';
  import TimePicker from '@c/earthPushing/bullet-box/timePicker.vue';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import CarShop from '@c/reservation/carShop.vue';
  import { toPublish } from '@mqtt';
  import { getTaskInfo } from '@/gql/earthPushing/dispatch';
  import { telCall } from '@/utils/copyText';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const shopList = ref(null)
  const longitude = ref()
  const latitude = ref()
  const Navigation = ref(null)
  const orderAll = ref({})
  const times = ref(null) //时间弹框

  const orderID = ref()
  onLoad((pearm) => {
    orderID.value = pearm.id
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getTaskInfo,
      variables: {
        id: 0,
        zhuan_id: Number(orderID.value)
      },
    };
    toPublish(
      'ql/staff/getTaskInfo',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getTaskInfo } = obj.data;
        orderAll.value = getTaskInfo
      }
    );
  }
  function operate(type : number) {
    switch (type) {
      case 1:
        shopList.value.open()
        break;
      case 2:
        showLoading()
        const payload1 = {
          id: Number(orderID.value),
          staff_id
        };
        toPublish('staff/refuseZhuan',
          payload1,
          (obj : any) => {
            uni.hideLoading();
            const { code, msg } = obj;
            if (code === 1) {
              navBack()
              successToast(msg)
            } else {
              errorToast(msg)
            }
          }
        );
        break;
      case 3:
        times.value.init()
        break;
    }
  }
  // 接单
  function Receiving(e : any) {
    showLoading()
    const payload2 = {
      id: Number(orderID.value),
      staff_id,
      endtime: e,
    };
    toPublish('staff/acceptZhuan',
      payload2,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          navBack()
          successToast(msg)
        } else {
          errorToast(msg)
        }
      }
    );
  }
  function position(lat : number, lot : number) {
    longitude.value = lot;
    latitude.value = lat;
  }
  // 导航并打开导航弹框
  function NavigationLoc() {
    Navigation.value.open()
  }
  function daohang(type : string) {
    let position = {
      latitude: Number(orderAll.value.latitude),
      longitude: Number(orderAll.value.longitude),
    };
    let addres = orderAll.value.delivery_address;
    switch (type) {
      //高德地图高航
      case 'de':
        window.location.href = `https://uri.amap.com/navigation?from=${longitude.value},${latitude.value},当前位置&to=${orderAll.value.longitude
          },${orderAll.value.latitude},${orderAll.value.delivery_address}&mode=car&policy=1&src=${orderAll.value.delivery_address
          }&coordinate=gaode&callnative=1`;
        break;
      //百度地图导航
      case 'bai':
        window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${latitude.value},${longitude.value
          }|name:当前位置&destination=${position}|name:${addres},&mode=driving&region=henan&output=html&src=webapp.baidu.openAPIdemo`;
        break;
      //腾讯地图导航
      case 'teng':
        window.location.href = `http://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${addres}&tocoord=${position}&referer=dfdfd`;
        break;
    }
  }
</script>

<style scoped lang="less">
  .state {
    padding: 2rpx 10rpx;
    box-sizing: border-box;
    background: rgba(164, 202, 255, .3);
    border-radius: 30px;
    color: #3F8FFB;
    font-size: 24rpx;
    margin-left: 10rpx;
  }

  .top {
    margin-top: 15rpx;
    align-items: flex-start;

    .left {
      width: 22%;
      color: #666;
    }
  }

  .but {
    width: 140rpx;
    height: 57rpx;
    background: rgba(164, 202, 255, .2);
    border-radius: 5px;
    text-align: center;
    line-height: 50rpx;
    color: #3F8FFB;
  }

  .popup {
    width: 100%;

    view {
      width: 100%;
      padding: 25rpx 0px;
      box-sizing: border-box;
      background-color: white;
      text-align: center;
      font-size: 32rpx;
    }

    view:nth-of-type(2) {
      border-bottom: 1px solid #eee;
      border-top: 1px solid #eee;
    }

    view:nth-last-child(1) {
      margin-top: 20rpx;
    }
  }

  .bottoms {
    margin-top: 20rpx;

    view {
      width: 166rpx;
      height: 64rpx;
      border: 1px solid #999999;
      border-radius: 5px;
      text-align: center;
      line-height: 64rpx;
      box-sizing: border-box;
    }

    view:nth-of-type(2) {
      border: 0px;
      width: 166rpx;
      height: 64rpx;
      background: #1D8DFF;
      border-radius: 5px;
      text-align: center;
      line-height: 64rpx;
      color: #fff;
    }
  }
</style>
<style>
  .bottoms>>>.uni-date {
    width: 166rpx;
    flex: none;
  }
</style>